(function () {
    var hobbyDatas = [
        ['看电视', 0.7421], ['散步', 0.7156], ['体育锻炼', 0.2280], ['听广播', 0.1727], ['打牌', 0.1575],
        ['养宠物', 0.1445], ['种花', 0.1187], ['打麻将', 0.0999], ['看书报', 0.0975], ['看戏或看电影', 0.0858],
        ['集体旅游', 0.0764], ['下棋', 0.0411], ['上网', 0.0223], ['书法', 0.0153], ['钓鱼', 0.0141]
    ];
    hobbyDatas.sort(function(x, y) { return x[1] - y[1]; });
    var hobbyNames = [], hobbyValues = [];
    for (var i = 0; i < hobbyDatas.length; i++) {
        hobbyNames.push(hobbyDatas[i][0]);
        hobbyValues.push(hobbyDatas[i][1]);
    }

    var chart = echarts.init(document.getElementById('chartHobbies'), 'default');
    option = {
    	backgroundColor: '#08121c',
        color: ['#fff'],
        title: {
            text: '老人偏好',
            textStyle: { color: '#fff', fontSize: 26, fontWeight: 'normal' },
            left: '3%',
            top: '3%'
        },
        tooltip: {
            show: true,
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            // backgroundColor: 'rgba(91, 238, 114, 0.9)',
            backgroundColor: 'rgba(255, 121, 121, 0.85)',
            padding: 15,
            formatter: function(params) {
                return params[0].name + ' ' + Math.ceil(params[0].value * 100) + '%';
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0],
            min: 0,
            max: 1,
            splitNumber: 5,
            axisLabel: {
                textStyle: {
                    color: '#fff'
                },
                formatter: function(value, index) {
                    return value + "%";
                },
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.15)'
                }
            },
            axisTick: {
                show: true,
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                }
            },
            splitLine: {
                show: true,
                type: 'solid',
                lineStyle: {
                    width: 0.5,
                    color: ['rgba(255, 255, 255, 0.15)']
                }
            }
        },
        yAxis: {
            type: 'category',
            axisLabel: {
                textStyle: {
                    color: '#fff'
                },
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.15)'
                },
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: true,
                lineStyle: {
                    width: 0.5,
                    color: ['rgba(255, 255, 255, 0.15)']
                }
            },
            splitArea: {
                show: false
            },
            data: hobbyNames
        },
        series: [
            {
                type: 'bar',
                barCategoryGap: '40%',
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        formatter: function(params) {
                            return Math.ceil(params.value * 100) + '%';
                        },
                        textStyle: {
                            color: function(params) {
                                return getBarColor(params);
                            }
                        }
                    },
                    emphasis: {
                        textStyle: {
                            color: 'rgba(255, 121, 121, 1)'
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        // color: 'rgba(103, 253, 169, 0.8)',
                        color: function(params) {
                            return getBarColor(params);
                        },
                        barBorderRadius: 2
                    },
                    emphasis: {
                        // color: 'rgba(90, 239, 141, 1)'
                        color: 'rgba(255, 121, 121, 0.9)'
                    }
                },
                data: hobbyValues
            }
        ]
    };

    chart.setOption(option);

    function getBarColor(params) {
        if (params.value >= 0.6) {
            return 'rgba(103, 253, 169, 0.9)';
        } else if (params.value >= 0.2) {
            return 'rgba(103, 253, 169, 0.7)';
        } else if (params.value >= 0.1) {
            return 'rgba(103, 253, 169, 0.6)';
        } else {
            return 'rgba(103, 253, 169, 0.4)';
        }
    }

})();


